<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index2.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/utils.css">

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        .el-pagination {
            text-align: right;
            padding: 15px;
        }
    </style>
    <title>文章管理</title>
</head>
<body class="hold-transition">
<div id="app" v-cloak>
    <div class="content-header" style="  padding: 10px;
    border-radius: 4px;
    background: white;
    margin-bottom: 10px;">
        <el-breadcrumb separator="/">
            <div class="toPage">
                <a href="main-table.html">
                    <h class="a-recovery">已发布({{totalData.Count0}})</h>
                    /</a>
                <a>
                    <h>回收站({{totalData.Count2}})</h>
                    /</a>
                <a href="draft-table.html">
                    <h class="a-recovery">草稿箱({{totalData.Count1}})</h>
                </a>
            </div>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">博客管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>回收站</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <el-table
                    size="medium "
                    stripe highlight-current-row
                    current-row-key="id"
                    :data="tableData"
                    style="width: 100%; padding: 15px;border-radius: 4px;"
            >
                <el-table-column
                        type="index"
                        align="center"
                        label="序号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="img"
                        label="标签封面"
                        align="center"
                        width="200">
                    <template scope="scope">
                        <el-image :src="scope.row.img" style="width: 40px; height: 40px"
                                  class="head_pic"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="title"
                        align="center"
                        label="文章标题"
                        width="230">
                    <template slot-scope="scope">
                        <span style="color: #0BA4E0">《{{scope.row.title}}》</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="introduce"
                        align="center"
                        width="260"
                        label="文章介绍">
                </el-table-column>

                <el-table-column
                        prop="tags"
                        width="150"
                        label="标签">
                    <template slot-scope="scope">
                                            <span class="el-tag el-tag--medium el-tag--light "
                                                  v-for="(u,i) in scope.row.tagNames">{{u}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="publishTime"
                        align="center"
                        width="180"
                        label="发布时间"
                        :formatter="dateFormat">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)" plain>编辑</el-button>
                        <el-button size="mini" type="warning" @click="handleRecycle(scope.row)" plain>回收站</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)" plain>彻底删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-size="pagination.pageSize"
                    layout="total, pager, jumper"
                    :total="pagination.total">
            </el-pagination>

        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script th:src="@{/js/vue.js}"></script>-->
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script type="text/javascript" src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/jquery.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            totalData: {},
            statusCode: 2,//表示此页为回收站状态的博客 状态：0：发布，1：草稿,2:回收站
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 5,//每页显示的记录数
                total: 0,//总记录数
                queryString: '' //查询条件---用户id
            }
        },
        created() {

            this.findPage();//当VUE对象初始化完成分页查询

        },
        methods: {

            /*
            * 分页
            *
            * */
            findPage() {
                axios.post("/admin").then((res) => {
                    this.pagination.queryString = res.data.data.id;
                    axios.get("/article/getTotalCount/" + 0 + "/" + this.pagination.queryString).then((res) => {
                        console.log("发布状态的文章数为" + res.data.data);
                        if (res.data.flag) {
                            this.totalData.Count0 = res.data.data;
                        }
                    });
                    axios.get("/article/getTotalCount/" + 1 + "/" + this.pagination.queryString).then((res) => {
                        console.log("发布状态的文章数为" + res.data.data);
                        if (res.data.flag) {
                            this.totalData.Count1 = res.data.data;
                        }
                    });
                    axios.get("/article/getTotalCount/" + 2 + "/" + this.pagination.queryString).then((res) => {
                        console.log("发布状态的文章数为" + res.data.data);
                        if (res.data.flag) {
                            this.totalData.Count2 = res.data.data;
                        }
                    });
                    axios.post("/article/search/" + this.statusCode, this.pagination).then((res) => {
                        let length = res.data.data.rows.length;
                        //格式化日期
                        for (let i = 0; i < length; i++) {
                            let date = new Date((res.data.data.rows)[i].recentEdit);
                            let daterecentEditdate = new Date((res.data.data.rows)[i].publishTime);
                            (res.data.data.rows)[i].recentEdit = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
                            (res.data.data.rows)[i].publishTime = daterecentEditdate.getFullYear() + "-" + (daterecentEditdate.getMonth() + 1) + "-" + daterecentEditdate.getDate() + " " + daterecentEditdate.getHours() + ":" + daterecentEditdate.getMinutes() + ":" + daterecentEditdate.getSeconds()
                        }
                        this.tableData = res.data.data.rows;

                        this.pagination.total = res.data.data.total;
                    });
                });
            },
            handleCurrentChange(currentPage) {//切换页码
                // 设置最新的页码
                this.pagination.currentPage = currentPage;
                //当切换页码的时候，需要重新调用findpPageF进行分页查询
                this.findPage();

            },
            handleRecycle(row) {
                var status = "0";
                axios.put("/article/setStatus/" + row.id + "/" + status).then((res) => {
                    if (res.data.flag) {
                        this.$message.success("文件恢复成功");
                    }
                });
                this.findPage();
            },
            handleUpdate(row) {  //进入编辑文档页面
                window.location.href = "article-edit.html?id=" + row.id;
            }
            ,
            handleDelete(row) { //彻底删除

                this.$confirm("您确定要删除当前数据吗？", "提示", {
                    type: "warning"
                }).then(() => {
                    axios.delete("/article/" + row.id).then((res) => {
                        if (res.data.flag) {
                            this.$message.success("文件彻底删除成功")
                        }
                    });
                }).catch(() => {
                    console.log("用户点击了取消按钮")
                }).finally(() => {
                    this.findPage();
                });
            },
            dateFormat(row, column) { //格式化日期
                var date = new Date(row.publishTime)
                return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate()

            }
        }
    })
    ;
</script>
</body>
</html>